/**
*@Author 周贞荣
*@Modify 周贞荣
*@Date 2022/3/23 21:02
*@Description 文件功能描述
*/
<template>
    <div class="flex flex-column wh100" style="padding-bottom: 50px">
        <div class="flex-full overflow-x">
            <ShopItem v-for="(item,index) in cVal.list" :item="item" :key="item.id" v-model="item.num"
                      @delete="deleteItem(index)">
                <template #check>
                    <van-checkbox name="check" v-model="item.isCheck" @change="changeCheck(item)"/>
                </template>
                <template #num>
                    <van-stepper :min="0" v-model="item.num" @change="changeNum(item)" input-width="40px"
                                 button-size="18px"/>
                </template>
            </ShopItem>
            <div class="paddingB30"></div>
        </div>
        <van-submit-bar :price="cVal.total" :disabled="!cVal.total" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="isAll">全选</van-checkbox>
            <template #tip>
                请填写一条配送地址, <span class="primary-color" @click="addAddress">添加配送地址</span>
            </template>
        </van-submit-bar>
    </div>
</template>

<script lang="ts" setup>
    import ShopItem from './views/ShopItem.vue'
    import {ref, reactive, watch, getCurrentInstance} from "vue";

    const {proxy} = getCurrentInstance();
    // 是否全选
    const isAll = ref(false);
    // 展示数据
    const cVal = reactive({
        list: [
            {id: '001', price: 45.50, isCheck: false, num: 0},
            {id: '002', price: 45.50, isCheck: false, num: 0},
            {id: '003', price: 45.50, isCheck: false, num: 0},
            {id: '004', price: 45.50, isCheck: false, num: 0},
            {id: '005', price: 45.50, isCheck: false, num: 0},
            {id: '006', price: 45.50, isCheck: false, num: 0},
            {id: '007', price: 45.50, isCheck: false, num: 0},
            {id: '008', price: 45.50, isCheck: false, num: 0},
            {id: '009', price: 45.50, isCheck: false, num: 0},
            {id: '010', price: 45.50, isCheck: false, num: 0},
        ],
        total: 0
    });
    // 监听是否全选
    watch(isAll, (val) => {
        cVal.list.map(item => (item.isCheck = val));
        changeList();
    });

    /**
     * 列表数据改变触发计算
     **/
    function changeList() {
        cVal.total = 0;
        cVal.list.forEach(item => {
            if (item.isCheck) {
                cVal.total += item.price * item.num * 100;
            }
        })
    }

    /**
     * 删除当前数据
     * @param index 数组下标
     * */
    function deleteItem(index) {
        cVal.list.splice(index, 1);
        changeList();
    }

    /**
     * 当前数据选装状态
     * @param item 当前行数据
     * */
    function changeCheck(item) {
        if (item.isCheck && item.num === 0) {
            item.num = 1;
        }
        if (!item.isCheck) {
            item.num = 0;
        }
        changeList();
    }

    /**
     * 当前数据选装数量改变
     * @param item 当前行数据
     * */
    function changeNum(item) {
        item.isCheck = item.num > 0;
        changeList();
    }

    /**
     * 添加配送地址
     */
    function addAddress() {
        proxy.$router.push({path:'/addressList'})
    }

    /**
     * 支付页对接
     */
    function onSubmit() {
        proxy.$notify({type: 'danger', message: '支付接口未对接'})
    }
</script>

<style scoped>

</style>